<template>
    <div class="fees">
        <x-header :left-options="{backText: ''}" >支部缴纳
          <a slot="right"  class="choose" @click="changChoose()"></a>
        </x-header>
        <div class="fees_lists">
            <group>
              <cell :title="item.department"  v-for="(item,index) of branchs" :key="index" :link="{name: 'PersonFees', params: {branchid: item.department_id}}">
                  <img slot="icon" src="./zbfc_zbtb.png" alt="" class="weui-cell_icon">
                  <p>已交<span>{{item.sum}}</span>元</p>
              </cell>
            </group>
        </div>
        <div v-transfer-dom>
            <popup v-model="isShow" position="right" @on-hide="hidePopup()">
                <div class="chooseBox">
                    <div class="box_title">条件筛选</div>
                    <div class="box_classify">
                        <div class="box_time">
                        <!--<div class="classify_name">时间</div>-->
                        <div class="classify_date">
                            <checker v-model="selectedDate" default-item-class="normal_date" selected-item-class="selected_date">
                            <checker-item :value="item" v-for="(item, index) in dateClass" :key="index">{{item.value}}</checker-item>
                            </checker>
                            <group>
                            <datetime v-model="startDate" title="开始日期" clear-text="今天" @on-clear="setToday"></datetime>
                            </group>
                            <group class="endDate">
                            <datetime v-model="endDate" title="结束日期"></datetime>
                            </group>
                        </div>
                        </div>
                        <div class="box_name">
                        <!--<div class="classify_name">支部名称</div>-->
                        <div class="classify_search" style="margin-bottom: 2.8rem; margin-top: 2.8rem;">
                          <group>
                            <selector v-model="selectedData" :value-map="['id', 'department']" :options="ajaxData" placeholder="全部支部"></selector>
                          </group>
                            <!-- <model-list-select :list="ajaxData"
                                    option-value="id"
                                    option-text="department"
                                    v-model="selectedData"
                                    placeholder="全部"
                                    @searchchange="searchData">
                            </model-list-select> -->
                        </div>
                        </div>
                    </div>
                    <div class="box_button">
                        <x-button type="primary" @click.native="choosedData">确定</x-button>
                    </div>
                </div>
            </popup>
        </div>
    </div>
</template>

<script>
import {
  TransferDom,
  XHeader,
  Group,
  Cell,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  Selector,
  XButton
} from "vux";
// import { ModelListSelect } from "vue-search-select";
import { mapState, mapGetters } from "vuex";
export default {
  directives: {
    TransferDom
  },
  computed: {
    ...mapGetters(["feesBranch", "branchList", "feesBranchSelect"])
  },
  created() {
    // this.$store.dispatch("getFeesBranch");
    this.$store.dispatch("getBranchList");
  },
  activated() {
    this.$store.dispatch("getFeesBranch", {
      time: this.selectedDate.key,
      start: this.startDate,
      end: this.endDate
    });
    // this.branchs = this.feesBranch;
    this.ajaxData = this.branchList;
  },
  deactivated() {
    this.branchs = [];
  },
  components: {
    XHeader,
    Group,
    Cell,
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    Selector,
    // ModelListSelect,
    XButton
  },
  data() {
    return {
      branchs: [],
      isShow: false,
      selectedDate: { key: 1, value: "本月" },
      dateClass: [
        {
          key: 1,
          value: "本月"
        },
        {
          key: 2,
          value: "本季度"
        },
        {
          key: 3,
          value: "本年"
        }
      ],
      startDate: "",
      endDate: "",
      ajaxData: [],
      selectedData: "",
      searchText: ""
    };
  },
  watch: {
    startDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    endDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    selectedDate: function(val) {
      if (Object.keys(val).length) {
        this.startDate = "";
        this.endDate = "";
      }
    },
    feesBranch(Value) {
      this.branchs = Value;
    },
    branchList: function(val) {
      this.ajaxData = val;
    },
    feesBranchSelect: function(val) {
      this.branchs = val;
    }
  },
  methods: {
    changChoose() {
      this.isShow = true;
    },
    hidePopup() {
      this.isShow = false;
    },
    setToday(value) {
      let now = new Date();
      let cmonth = now.getMonth() + 1;
      let day = now.getDate();
      if (cmonth < 10) cmonth = "0" + cmonth;
      if (day < 10) day = "0" + day;
      this.startDate = now.getFullYear() + "-" + cmonth + "-" + day;
    },
    searchData() {
      this.searchText = searchText;
    },
    choosedData() {
      if (!this.selectedDate && !this.startDate && !this.endDate) {
        this.$vux.toast.text("请选择时间", "middle");
      } else if (this.startDate && !this.endDate) {
        this.$vux.toast.text("请选择结束时间", "middle");
      } else if (!this.startDate && this.endDate) {
        this.$vux.toast.text("请选择开始时间", "middle");
      } else {
        this.isShow = false;

        this.$store.dispatch("getFeesBranchSelect", {
          time: this.selectedDate.key,
          start: this.startDate,
          end: this.endDate,
          department_id: this.selectedData
        });

        if (Object.keys(this.selectedDate).length) {
          window.sessionStorage.removeItem("fee_start");
          window.sessionStorage.removeItem("fee_end");
          window.sessionStorage.setItem("fee_time", this.selectedDate.key);
        } else if (this.startDate && this.endDate) {
          window.sessionStorage.removeItem("fee_time");
          window.sessionStorage.setItem("fee_start", this.startDate);
          window.sessionStorage.setItem("fee_end", this.endDate);
        }
      }
    }
  }
};
</script>

<style lang="less">
.fees {
  font-size: 0;
  min-height: 100%;
  background: rgb(245, 245, 249);
  .choose {
    width: 1.375rem;
    height: 1.375rem;
    background: url("./shaixuan.png") no-repeat;
    background-size: 1.375rem 1.375rem;
  }
  .fees_lists {
    padding: 2.875rem 0 0;
    .weui-cells {
      margin-top: 0.5rem;
    }
    .weui-cell {
      padding: 0.75rem 1.125rem 0.75rem 0.8125rem;
    }
    .vux-cell-primary {
      text-align: left;
    }
    .vux-label {
      font-size: 1.125rem;
    }
    .weui-cell__ft {
      font-size: 0.6875rem;
      color: rgb(214, 60, 50);
      padding-right: 1rem;
      span {
        font-size: 1rem;
      }
    }
    .weui-cell_icon {
      display: block;
      width: 1.6875rem;
      margin-right: 0.375rem;
    }
  }
}
</style>
